<template>
  <div id="app">
    <el-tooltip v-if="$store.getters.roles.length !== 0 && level <= 2" placement="bottom" effect="light">
      <div slot="content">
        <div v-if="latency === -1">{{ $t('网络连接异常') }}</div>
        <template v-else>
          <div v-if="level === 2">{{ $t('网络状态一般') }}</div>
          <div v-if="level === 1">{{ $t('网络状态较差') }}</div>
          <div style="margin-top: 4px;">{{ $t('网络延迟') }}:  {{ latency }}ms</div>
        </template>
      </div>
      <div class="signal-week">
        <i v-if="latency === -1" class="el-icon-error" />
        <span v-for="v in 4" :key="v" :class="v <= level ? levelClass : ''" :style="{height: (v + 1) * 5 + 'px'}" />
      </div>
    </el-tooltip>
    <div v-if="showIm === 'true'" class="chat">
      <!--      <svg id="svg" aria-hidden="true" class="svg-icon" @click="openChat"><use xlink:href="#icon-message" />&lt;!&ndash;&ndash;&gt;</svg>-->
      <!--      <svg id="svg" data-v-c8a70580="" aria-hidden="true" class="svg-icon" ><use data-v-c8a70580="" xlink:href="#icon-message" /></svg>-->
      <svg-icon id="svg" icon-class="message" @click="openChat" />
    </div>
    <!-- 聊天对话框 -->
    <!--    <el-dialog :title="$t('聊天')" :visible.sync="chatOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm im-dialog" append-to-body>-->
    <!--      -->
    <!--      &lt;!&ndash;      <im_chat />&ndash;&gt;-->
    <!--    </el-dialog>-->
    <div v-show="chatOpen" class="im-mask" @click.stop="chatOpen = false">
      <iframe
        id="iframeVue"
        :src="url"
        width="100%"
        height="100%"
        frameborder="no"
        border="0"
        append-to-body
      />
    </div>
    <div v-show="false" id="hideContainer" />
    <router-view />
    <ExtraProcess />
    <!-- socket注册 -->
    <webSocket />
  </div>
</template>

<script>
import Ping from './ping.js'
import { loadMicroApp } from 'qiankun'
import Vue from 'vue'
import webSocket from '@/layout/components/webSocket'
import { mapState } from 'vuex'
// import { getToken } from '@/utils/auth'
export default {
  name: 'App',
  components: {
    webSocket
  },
  data() {
    return {
      levelClass: 'fast',
      level: 4, // 信号强弱
      latency: 0, // 延迟
      chatOpen: false, // 是否弹出聊天
      flag: false,
      imShow: false
    }
  },
  computed: {
    ...mapState({ url: state => state.app.url, showIm: state => state.app.showIm })
  },
  created() {
    window.im = {
      imClose: true
    }
  },
  mounted() {
    // this.listenResizeFn()
    // window.addEventListener('resize', function() { this.listenResizeFn }, false)

    var productName = localStorage.getItem('productName')
    document.title = this.$t(productName)

    var _this = this
    setInterval(function() {
      _this.checkLatency()
    }, 10000)

    window.addEventListener('message', e => {
      if (e.data === false) {
        this.chatOpen = false
      }
    })
    // this.initComponent()
  },
  methods: {
    listenResizeFn() {
      this.$nextTick(() => {
        if (document.getElementById('watermark')?.style !== null) {
          document.getElementById('watermark').style.zoom = 1 / window.devicePixelRatio
        }
      })
    },
    initChat() {
      this.url = process.env.VUE_APP_IM_VUE + '/chat'
    },
    openChat() {
      this.chatOpen = true
    },
    async initComponent() {
      if (!window.commonComponents) {
        window.commonComponents = []
      }
      const commonComponent = window.commonComponents
      const app = loadMicroApp({
        name: 'im_chat',
        entry: process.env.VUE_APP_IM_VUE,
        container: '#hideContainer',
        props: { commonComponents: commonComponent }
      }, {
        sandbox: {
          experimentalStyleIsolation: true,
          speedy: true
        }
      })
      console.log(process.env.VUE_APP_IM_VUE, '地址')
      await app.mountPromise
      if (commonComponent.component) {
        // 循环全部注册为组件
        commonComponent.component.forEach(component => {
          Vue.component(component.name, component)
        })
        window.commonComponents.flag = true
        console.log('这里执行没', window.commonComponents.flag, window.commonComponents)
      }
    },
    checkLatency() {
      var settings = {
        timeout: 3100,
        logError: true
      }
      var p = new Ping(settings)
      var _this = this
      var _href = location.origin
      p.ping(_href)
        .then(function(data) {
          // console.log(data)
          _this.latency = +(data)
          if (_this.latency <= 100) {
            _this.level = 4
            _this.levelClass = 'fast' // 快
          } else if (_this.latency > 100 && _this.latency < 200) {
            _this.level = 3
            _this.levelClass = 'good' // 良好
          } else if (_this.latency >= 200 && _this.latency <= 400) {
            _this.level = 2
            _this.levelClass = 'common' // 普通
          } else {
            _this.level = 1
            _this.levelClass = 'bad' // 差
          }
        })
        .catch(function() { // 断网
          _this.latency = -1
          _this.level = -1
          _this.levelClass = ''
        })
    }
  }
}
</script>
<style lang="scss" scoped>
#svg{
  cursor: pointer;
  //color: #e5e5e5
  color: #409eff;
}
#svg:hover {
  color:#409eff;
}
.chat{
  //background-color: #fff;
  //box-shadow: 0 3px 12px 2px rgba(218,223,232,0.5);
  position: fixed;
  top: 70%;
  right: -1px;
  transform: translateY(-50%);
  z-index: 999;
  font-size: 26px;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
}
.signal-week {
  position: fixed;
  cursor: pointer;
  right: 10px;
  bottom: 10px;
  z-index: 2001;
  .el-icon-error{
    color: #EF3E36;
    position: fixed;
    bottom: 11px;
    font-size: 15px;
    right: 11px;
    transition: background 2s ease,transform 2s ease-in 1s;
  }
  // background: #fff;
  span{
    height: 10px;
    width: 5px;
    background: #c5c5c5;
    display: inline-block;
    margin: 0 1px;
    transition: background 2s ease,transform 2s ease-in 1s;
    border-radius: 5px;
  }
  .fast, .good{
    background: #6CEB81;
  }
  .common{
    background: #F5D447;
  }
  .bad{
    background: #EF3E36;
  }
}

.im-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top:0;
  left:0;
  background-color: rgba(0,0,0,.3);
  z-index: 9999
}

</style>
